let canvas = document.querySelector("#cvs");
let cxt = canvas.getContext("2d");
let lineWidth = 5;
let eraserEnabled = false;
autoSetCanvasSize(canvas);
listenToUser(canvas);
function autoSetCanvasSize(canvas) {
  setCanvasSize();
  function setCanvasSize() {
    let width = document.documentElement.clientWidth;
    let height = document.documentElement.clientHeight;
    canvas.width = width;
    canvas.height = height;
  }
  window.onresize = function () {
    setCanvasSize();
  };
}
function listenToUser(canvas) {
  let using = false;
  let lastPoint = {};
  if (document.documentElement.ontouchmove !== undefined) {
    canvas.ontouchstart = function (e) {
      using = true;

      if (!eraserEnabled) {
        lastPoint["x"] = e.touches[0].clientX;
        lastPoint["y"] = e.touches[0].clientY;
      } else {
        clearDraw(e.touches[0].clientX, e.touches[0].clientY);
      }
    };
    canvas.ontouchmove = function (e) {
      if (!using) {
        return false;
      }
      if (!eraserEnabled) {
        drawLine(
          lastPoint.x,
          lastPoint.y,
          e.touches[0].clientX,
          e.touches[0].clientY
        );
        lastPoint["x"] = e.touches[0].clientX;
        lastPoint["y"] = e.touches[0].clientY;
      } else {
        clearDraw(e.touches[0].clientX, e.touches[0].clientY);
      }
    };
    canvas.ontouchend = function (e) {
      using = false;
    };
  } else {
    canvas.onmousedown = function (e) {
      using = true;

      if (!eraserEnabled) {
        lastPoint["x"] = e.clientX;
        lastPoint["y"] = e.clientY;
      } else {
        clearDraw(e.clientX, e.clientY);
      }
    };
    canvas.onmousemove = function (e) {
      if (!using) {
        return false;
      }
      if (!eraserEnabled) {
        drawLine(lastPoint.x, lastPoint.y, e.clientX, e.clientY);
        lastPoint["x"] = e.clientX;
        lastPoint["y"] = e.clientY;
      } else {
        clearDraw(e.clientX, e.clientY);
      }
    };
    canvas.onmouseup = function (e) {
      using = false;
    };
  }
}
function drawLine(x1, y1, x2, y2) {
  cxt.beginPath();
  cxt.lineWidth = lineWidth;
  cxt.moveTo(x1, y1);
  cxt.lineTo(x2, y2);
  cxt.closePath();
  cxt.stroke();
}

function clearDraw(x, y, width = 20, height = 20) {
  cxt.clearRect(x - width / 2, y - height / 2, width, height);
}
pen.onclick = function () {
  eraserEnabled = false;
  pen.classList.add("active");
  eraser.classList.remove("active");
};

eraser.onclick = function () {
  eraserEnabled = true;
  pen.classList.remove("active");
  eraser.classList.add("active");
};

function clearOthersStyle() {
  document.querySelector("#red").classList.remove("active");
  document.querySelector("#orange").classList.remove("active");
  document.querySelector("#blue").classList.remove("active");
  document.querySelector("#green").classList.remove("active");
  document.querySelector("#purple").classList.remove("active");
  document.querySelector("#black").classList.remove("active");
}
document.querySelector(".colors").onclick = function (e) {
  clearOthersStyle();
  e.target.classList.add("active");
  if (e.target.id.trim() === "") {
    return;
  }
  cxt.fillStyle = e.target.id;
  cxt.strokeStyle = e.target.id;
};

clear.onclick = function () {
  cxt.clearRect(0, 0, canvas.width, canvas.height);
};
download.onclick = function () {
  var url = canvas.toDataURL("image/png");
  var a = document.createElement("a");
  document.body.appendChild(a);
  a.href = url;
  a.download = "我的画儿";
  a.target = "_blank";
  a.click();
};
function clearSizeStyle() {
  thin.classList.remove("active");
  thick.classList.remove("active");
  thicker.classList.remove("active");
}
thin.onclick = function () {
  lineWidth = 5;
  clearSizeStyle();
  thin.classList.add("active");
};
thick.onclick = function () {
  lineWidth = 10;
  clearSizeStyle();
  thick.classList.add("active");
};
thicker.onclick = function () {
  lineWidth = 20;
  clearSizeStyle();
  thicker.classList.add("active");
};
